<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    >
      <template #btns>
        <el-button v-if="meta.indexOf('OrderMoneyDetailListExcel') > -1" :loading="exportLoading" @click="handleExport">{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <div class="total_wrap">
      <div class="item first">
        <div class="label" style="color: #fff">{{ $t('message.bcsx') }}</div>
        <div>{{ $t('message.heji') }}：</div>
      </div>
      <div class="item">
        <div class="label">{{ $t('message.zlsy') }}</div>
        <div>
          <span class="money">{{ $t('message.rmbfh') }} </span>
          <span class="value">{{ info.totalMoney || 0 }}</span>
        </div>
      </div>
      <div class="item">
        <div class="label">{{ $t('message.fhyklsy') }}</div>
        <div>
          <span class="money">{{ $t('message.rmbfh') }} </span>
          <span class="value">{{ info.noMemberMoney || 0 }}</span>
        </div>
      </div>
      <div class="item">
        <div class="label">{{ $t('message.hyklsy') }}</div>
        <div>
          <span class="money">{{ $t('message.rmbfh') }} </span>
          <span class="value">{{ info.memberMoney || 0 }}</span>
        </div>
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.lsh')"
        show-overflow-tooltip
        prop="serialNum"
        min-width="240"
      />
      <el-table-column
        align="center"
        :label="$t('message.ywlx')"
        show-overflow-tooltip
        min-width="120"
        prop="consumeTypeName"
      />
      <el-table-column
        align="center"
        :label="$t('message.szlx')"
        show-overflow-tooltip
        prop="flag"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.flag == '1'">{{ $t('message.sr') }}</span>
          <span v-else class="secondColor">{{ $t('message.zhichu') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.szjey')"
        show-overflow-tooltip
        prop="price"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.flag == '1'">{{ scope.row.price }}</span>
          <template v-if="scope.row.flag == '2'">
            <span v-if="scope.row.price>0" class="secondColor">- {{ scope.row.price }}</span>
            <span v-else>{{ scope.row.price }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.ddbh')"
        show-overflow-tooltip
        prop="orderId"
        min-width="210"
      />
      <el-table-column
        align="center"
        :label="$t('message.szfs')"
        prop="payMethodName"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        show-overflow-tooltip
        prop="createTime"
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.czr')"
        show-overflow-tooltip
        prop="creator"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        show-overflow-tooltip
        prop="status"
        fixed="right"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status == '1'">{{ $t('message.clcg') }}</span>
          <span v-else>{{ $t('message.clz') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="getList"
    />
  </div>
</template>

<script>
import Paginations from '@/components/paginations/paginations'
import dayjs from 'dayjs'
import { parseTime } from '@/utils/index'
import { TJshortcuts } from '@/utils/config'
import { consumeTypeList, orderMoneyDetailList, allConfigList, orderMoneyDetailListExcel } from '@/api'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'FinanceCurrent',
  components: {
    Paginations, QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [
          {
            filed: 'flag',
            type: 'select',
            label: this.$t('message.szlx'),
            clearable: true,
            options: [
              { value: '1', label: this.$t('message.sr') },
              { value: '2', label: this.$t('message.zhichu') }
            ]
          },
          {
            filed: 'payMethod',
            type: 'select',
            label: this.$t('message.szfs'),
            options: []
          },
          {
            filed: 'time',
            type: 'daterange',
            clearable: true,
            label: this.$t('message.createTime'),
            pickerOptions: {
              shortcuts: TJshortcuts
            }
          },
          {
            filed: 'consumeType',
            type: 'select',
            label: this.$t('message.ywlx'),
            clearable: true,
            options: []
          },
          {
            filed: 'orderId',
            type: 'input',
            label: this.$t('message.ddbh'),
            clearable: true
          }
        ],
        online: true
      },
      info: {},
      exportLoading: false,
      filters: {
        time: []
      },
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      list: [],
      meta: [],
      totalCount: 0
    }
  },
  created() {
    let time = []
    const start = new Date()
    const end = new Date()
    start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
    time = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
    this.filters.time = time
    this.meta = this.$route.meta.buttons || []
    this.pdgj()
    this.getConsumeTypeList()
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    pdgj() {
      allConfigList({ param: { type: '2', code: '1' }}).then(res => {
        if (res.errorCode !== '000000') return
        const arr = res.recordList
        arr.forEach(e => {
          e.label = e.name
        })
        this.queryFormConfig.formItems[1].options = arr
      }).catch(() => {})
    },
    getConsumeTypeList() {
      consumeTypeList({
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const arr = res.recordList
            arr.forEach(e => {
              e.label = e.name
              e.value = e.code
            })
            this.queryFormConfig.formItems[3].options = arr
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleExport() {
      const param = { ...this.filters }
      if (param.time) {
        param.startTime = param.time[0]
        param.endTime = param.time[1]
      } else {
        param.startTime = ''
        param.endTime = ''
      }
      this.exportLoading = true
      orderMoneyDetailListExcel({ param }).then(res => {
        this.exportLoading = false
        if (res.errorCode === '000000') {
          window.open(res.record.showUrl, '_blank')
        }
      }, () => {
        this.exportLoading = false
      })
    },
    getList(page) {
      const { filters, pagination } = this
      this.listLoading = true
      if (filters.time) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      if (pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date())
      }
      orderMoneyDetailList({
        pagination,
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.record.orderMoneyDetailList
            this.info = res.record || {}
            this.totalCount = res.record.totalCount
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    }
  }
}
</script>
